.get-coupon-wrapper {
  background: #F7F8FA;

  .content-wrap {
    margin-top: 24rpx;

    .scroll-wrap {
      padding: 0 32rpx;
      box-sizing: border-box;

      .coupon-item {
        display: flex;
        align-items: center;
        padding: 12rpx 32rpx 12rpx 0;
        box-sizing: border-box;
        position: relative;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        background: #FFFFFF;
        box-shadow: 0 0 24rpx rgba(0, 0, 0, .12);
        overflow: hidden;
        margin-bottom: 32rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .coupon-line {
          position: relative;
          width: 0;
          height: 80px;
          border-right: 1px dashed #40B97C;

          .coupon-circle {
            width: 16rpx;
            height: 16rpx;
            background: #F1F2F4;
            position: absolute;
            left: 50%;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 0 12rpx rgba(0, 0, 0, .12);

            &.top {
              top: 0;
              transform: translate(-50%, calc(-50% - 12rpx));
            }

            &.bottom {
              bottom: 0;
              transform: translate(-50%, calc(50% + 12rpx));
            }
          }
        }

        .coupon-btn-wrap {
          width: 160rpx;
          height: 56rpx;
          background: #40B97C;
          border-radius: 100rpx 100rpx 100rpx 100rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFFFFF;
          font-size: 24rpx;
          margin-left: auto;
        }

        .coupon-desc-wrap {
          margin-left: 32rpx;
          display: flex;
          flex-flow: column;
          align-items: center;

          .coupon-name {
            height: 56rpx;
            font-size: 40rpx;
            font-weight: bold;
            color: #1D2129;
            line-height: 56rpx;
          }

          .coupon-desc {
            height: 40rpx;
            font-size: 24rpx;
            color: #86909C;
            line-height: 40rpx;
            margin-top: 8rpx;
          }
        }

        .coupon-value-wrap {
          width: 210rpx;
          display: flex;
          flex-flow: column;
          align-items: center;

          .min-value {
            height: 32rpx;
            font-size: 20rpx;
            color: #86909C;
            line-height: 32rpx;
          }

          .price-wrap {
            display: flex;
            align-items: center;

            .price-prefix {
              width: 30rpx;
              height: 38rpx;
            }

            .price-value {
              height: 88rpx;
              font-size: 72rpx;
              font-weight: bold;
              color: #40B97C;
              line-height: 88rpx;
              margin-left: 4rpx;
            }
          }
        }
      }
    }
  }

  .tab-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92rpx;
    background: #FFFFFF;
    box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E7E7E7;
    position: relative;
    gap: 108rpx;
    box-sizing: border-box;

    .tab-item {
      width: 84rpx;
      height: 44rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.6);
      line-height: 44rpx;
      transition: color .1s ease;

      &.active {
        color: #40B97C;
      }
    }

    .tab-slide {
      position: absolute;
      left: var(--left-value);
      bottom: 0;
      width: 112rpx;
      height: 3rpx;
      background: #40B97C;
      transition: left .1s ease;
    }
  }
}
